<template>
    <div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
import { mapData } from "../assets/mapData";
export default {
    mounted() {
        let myChart = echarts.init(this.$refs.myChart);
        //注册当前使用的地图名
        echarts.registerMap("chinaMap", mapData);
        let option = {
            geo: {
                //地理坐标组件
                type: "map",
                map: "chinaMap",
                roam: true, //平移
                zoom: 1, //默认是1 放大比列
                center: [116.17998, 23.360665],
																// label:{
																// 	show:true,
																// 	color:'black',
																// 	fontSize:10
																// }
            },
            label: {
                show: true,
                color: "white",
                fontSize: 10,
            },        
												series:[
													{
														type:"scatter",//散点图
														data:[
															{
																name:'北京市',
																value:[
																	116.46,
																	39.92,
																	4000,
																]
															}
														],
														coordinateSystem:'geo',
														symbolSize:30
													},
													{
														type:'effectScatter',//涟漪效果散点图
														coordinateSystem:'geo',
														data:[
															{
															name:'西安市',
															value:[
																108.95,
																34.26
															]
														}
														],
														//设置涟漪效果的相关配置
														rippleEffect:{
															number:2,//波纹数量
															scale:4
														},
														itemStyle:{
															color:'red'
														}
													}
												],
        };
        myChart.setOption(option);
    },
};
</script>
<style scoped>
#myChart {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
